<template>

	<view class="content">
		<view class="tops">
			<view class="tops1"> 薪秒贷 </view>
			<view class="tops2"> 放心借钱 </view>
		</view>
		
		<view class="bodys">
			
			<view style="height: 30rpx;"></view>
			
			<view class="body_tit"> 真实姓名 </view>
			
			<view class="body_inp">
				<input type="text" @input="getname" placeholder="请输入真实姓名" >
			</view>
			
			<view class="body_tit"> 手机号 </view>
			<view class="body_inp">
				<input type="number" maxlength="11" @input="getmobile" placeholder="请输入手机号" >
			</view>
			
			
			<view class="body_tit"> 身份证号 </view>
			<view class="body_inp">
				<input type="text" maxlength="19" @input="getuid" placeholder="请输入身份证号" >
			</view>
			
		
			
			<view class="body_tit"> 贷款额度 </view>
			
			<view class="body_inp">
				<input type="number" @input="getmoney" placeholder="请输入贷款金额" >
			</view>
				
			<view class="foot_btn" @click="submites" > 提交信息 </view>
			
			<view class="foot_icon">
				
				<veiw class="footicons">
					
					<view class="footicons1">
						<text class="icon-linghuopeijia iconfont"></text>
					</view>
					<view class="footicons2">灵活借钱</view>
					
				</veiw>
				
				<veiw class="footicons">
					<view class="footicons1">
						<text class="icon-bianjierukou iconfont"></text>
					</view>
					<view class="footicons2">安全便捷</view>
				</veiw>
				
				<veiw class="footicons">
					<view class="footicons1">
						<text class="icon-yanzhengma iconfont"></text>
					</view>
					<view class="footicons2">安全可靠</view>
				</veiw>
				
			</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				x: 30,
				score: 0,
				isChange: true,
				slideBarWidth: 300, // 进度条宽度
				maxScore: 160000 ,// 最大分数
				name:'',
				mobile:'',
				uid:''
			};
		},
		methods: {
			onChange(e) {
				if (this.isChange) {

					this.x = e.detail.x;

					console.log(e.detail.x);

					this.score = parseInt(this.x / this.slideBarWidth * this.maxScore);
					this.$emit('change', this.score);
				}
				setTimeout(() => {
					this.isChange = true;
				}, 2500);
			},
			changeX(score) {
				this.isChange = false;
				this.x = this.slideBarWidth * score / this.maxScore;
				this.score = score;
			},
			getmobile(ret){
				this.mobile=ret.detail.value;
			},
			getname(ret){
				this.name=ret.detail.value;
			},
			getmoney(ret){
				this.score=ret.detail.value;
			},
			getuid(ret){
				this.uid=ret.detail.value;
			},
			submites(){
				
				var mobile=this.mobile;
				var name=this.name;
				var score=this.score;
				var uid=this.uid;
				
				if(!name){
					uni.showToast({
						title:'请输入姓名',
						icon:'none'
					})
					return false;
				}
				
				const regex = /^1[3-9]\d{9}$/;
				if (!regex.test(mobile)) {
				
					uni.showToast({
						title:'请输入电话',
						icon:'none'
					})
					return false;
				}
				
				uni.navigateTo({
					url:"/pages/index/huoma?name="+name+"&mobile="+mobile+"&money="+score+"&uid="+uid
				})
				
				
			}
		},
		validatePhoneNumber(phoneNumber) {
		    const regex = /^1[3-9]\d{9}$/;
		    if (regex.test(phoneNumber)) {
		        return true; 
		    } else {
		        return false; 
		    }
		}
	};
</script>

<style>
	
	.footicons2{
		width: 120rpx;
		hieght:40rpx;
		text-align: center;
		font-size: 24rpx;
		line-height: 70rpx;
		color: #555555;
	}
	.footicons1>text{
		color: #1d66fc;
		font-weight: 500;
		font-size: 42rpx !important;
	}
	.footicons1{
		width: 80rpx;height:80rpx;
		margin: auto;
		border-radius: 80rpx;
		text-align: center;
		line-height: 80rpx;
		
	}
	.footicons{
		width: 120rpx;
		height:160rpx;
	}
	.footicons1{
		background: #7ab5ac;
		opacity: 0.5;
	}
	
	.foot_icon{
		width: 560rpx;
		height: 200rpx;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.foot_btn{
		background: #00d229;
		color: #ffffff;
		width: 600rpx;
		height: 70rpx;
		margin: 60rpx auto;
		border-radius: 60rpx;
		color: #ffffff;
		text-align: center;line-height: 70rpx;
		font-size: 30rpx;	
		font-weight: 500;
	}
	.body_tit>text{
		margin-left: 20rpx;
	}
	.body_inp>input{
		width: 560rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 32rpx;
		margin: auto;
	}
	.body_inp{
		width: 600rpx;
		height:60rpx;
		margin:20rpx auto;
		border: 1px solid #ececec;
		border-radius: 40rpx;
	}
	.body_tit{
		width: 600rpx;
		height:50rpx;
		margin:30rpx auto;
		font-size: 32rpx;
		color: #000000;
		font-weight: 500;
	}
	.bodys{
		width: 700rpx;
		height:1100rpx;margin: auto;
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 5rpx 5rpx 10rpx rgba(0, 0,0, 0.13);
	}
	
	.tops2{
		height: 60rpx;
		line-height: 40rpx;
		color: #ffffff;
		font-size: 28rpx;
		font-weight: 500;
	}
	
	.tops1{
		height: 90rpx;
		line-height: 100rpx;
		color: #ffffff;
		font-size: 38rpx;
		font-weight: bold;
	}
	.tops{
		width: 700rpx;
		height:150rpx;
		margin: auto;
	}
	.slider {
		height: 30rpx;
	}

	.gone {
		background: linear-gradient(to right, #1d66fc, #00fdc0);
		height: 30rpx;
		border-radius: 30rpx !important;
	}

	.sliderBar {
		background: #ffffff;
		width: 620rpx;
		height: 30rpx;
		margin: 30rpx auto;
		border-radius: 30rpx !important;
	}

	.content {
		width: 750rpx;
		height: auto;
		margin: auto;
	}
	

</style>